<template>
  <div class="login">
    <video
      class="myvideo"
      id="myvideo"
      autoplay
      loop
      playsInline
      muted
      src="https://china-img.soulapp.cn/admin/2020-06-24/302e6662-a360-4cdd-8a87-966ed18c4554.mp4"
    ></video>
    <div class="login-box">
      <h2 class="title">校园宿舍管理系统</h2>
      <el-form
        :model="form"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="form"
      >
        <el-form-item label="" prop="student">
          <el-input
            type="text"
            v-model="form.student"
            autocomplete="off"
            placeholder="请输入学工号"
            prefix-icon="el-icon-s-custom"
          ></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input
            type="password"
            v-model="form.password"
            autocomplete="off"
            placeholder="请输入密码"
            show-password
            prefix-icon="el-icon-s-goods"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="submitForm()">登录</el-button>
          <el-button type="danger" @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        student: [
          { required: true, message: "请输入学工号", trigger: "blur" },
          {
            // 手机号正则校验
            validator: (rule, value, callback) => {
              if (this.$reg.student.test(value)) {
                callback();
              } else {
                callback(new Error("学号必须为12为数字"));
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (this.$reg.pwd.test(value)) {
                callback();
              } else {
                callback(new Error("请输入6-16的数字和字母的组合"));
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm() {
      console.log(this.form);
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 50%;
  .myvideo {
    width: 100%;
    height: 100%;
    height: auto;
    position: fixed;
    top: 0;
    z-index: 0;
  }
  .login-box {
    position: absolute;
    width: 420px;
    height: 280px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 0 10px lightblue;
    background: rgba(0, 0, 0, 0.2);
  }
  .title {
    text-align: center;
    color: skyblue;
    font-size: 24px;
    letter-spacing: 5px;
    margin-bottom: 30px;
  }
  .form {
    margin-top: 10px;
    .el-form-item__label {
      color: white;
    }
    .el-input__inner {
      background-color: transparent;
      color: white;
    }
    .el-input {
      margin-left: -50px;
    }
    .el-button {
      margin-right: 28px;
    }
  }
}
</style>